<template>
  <div class="item-size-choose" @touchmove.stop.prevent>
    <div
      :class="{
        mask: true,
        animated: true,
        fadeIn: !pageLeave,
        fadeOut: pageLeave
      }"
      @click="maskClick"
    ></div>
    <div
      :class="{
        'choose-panel': true,
        animated: true,
        slideInUp: !pageLeave,
        slideOutDown: pageLeave
      }"
      @click.stop
      @touchmove.stop.prevent
    >
      <div class="icon-item">
        <img :src="imgUrl" alt />
      </div>
      <div class="item-info">
        <div
          class="price"
          v-if="vip_rule !== 0"
          :style="{ visibility: isChoosen ? 'visible' : 'hidden' }"
        >
          >
          <div class="normal-price">¥{{ spe_price }}</div>
          <div v-if="level && goodInfo.is_points !== 1" class="vip-price">
            ¥{{ discount_price }}
            <span class="vip-tag">VIP</span>
          </div>
          <div v-if="-(-points)" class="vip-price">+{{ points | pointFix }}积分</div>
        </div>
        <div class="price" v-if="vip_rule === 0">
          >
          <div
            class="normal-price"
            style="color:red;font-size: 0.66rem"
            v-if="spe_price"
          >¥{{ spe_price }}</div>
          <div
            class="vip-price"
            style="color:#444;font-size: 0.66rem;text-decoration: line-through;"
            v-if="original_price"
          >¥{{ original_price }}</div>
          <div v-if="-(-points)" class="vip-price">+{{ points | pointFix }}积分</div>
        </div>
        <div class="info-text" v-if="isChoosen">{{ chooseStr }}，库存{{ inventory }}件</div>
        <div class="info-text" v-else>请选择规格</div>
      </div>
      <div class="choose-box" @touchmove.stop>
        <div v-for="item in spec" class="item-choose" style="margin-bottom:0.48rem;">
          <div class="choose-container">
            <div
              @click="chooseSize1(item.name, detail)"
              :class="{
                size: true,
                active: choose[item.name] && choose[item.name].id === detail.id
              }"
              v-for="detail in item.detail"
              :key="detail.id"
            >{{ detail.name }}</div>
          </div>
          <!-- <div class="title" style="">
            {{ item.name }}
          </div>-->
        </div>
      </div>
      <div class="item-number">
        <div class="title">购买数量</div>
        <div class="btn-hub">
          <yd-spinner width="3.2rem" height="0.96rem" v-model="number"></yd-spinner>
        </div>
      </div>
      <div class="confirm" :class="{ 'fullscreen-bottom-style': isFullscreen }">
        <button
          v-if="goodInfo.is_serve === 0 && goodInfo.is_vip === 0"
          @click="addToCart"
          class="btn cart"
          :style="{background: subColor}"
        >加入购物车</button>
        <button @click="buy" class="btn" :style="{background: mainColor}">立即购买</button>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoodInventory, addToCart } from "@/api/mall";
import { mapState } from "vuex";
export default {
  props: ["spec", "goodInfo", "mode", "img", "outterChoose"],
  data() {
    return {
      pageLeave: false,
      chooseStr: "",
      number: 1,
      choose: {},
      price: "",
      inventory: 0,
      isChoosen: false,
      imgUrl: "",
      discount_price: "",
      original_price: "",
      spe_price: "",
      is_vip: false,
      specStr: "",
      spec_id: "",
      points: null
    };
  },
  computed: {
    ...mapState({
      level: state => state.user.level,
      isFullscreen: state => state.app.isFullscreen,
      mainColor: state => state.app.mainColor,
      subColor: state => state.app.subColor,
      vip_rule: state => state.app.vip_rule
    })
  },
  watch: {
    choose: {
      deep: true,
      handler: function(newVal, oldVal) {
        this.chooseStr = "";
        let keyLength = 0;
        for (let key in newVal) {
          keyLength++;
          this.chooseStr += newVal[key].name + " ";
        }
        if (keyLength === this.spec.length) {
          let arr = [];
          this.spec.forEach(item => {
            // console.log(this.choose[item.name].id);
            arr.push(this.choose[item.name].id);
          });
          this.specStr = arr.join(";");
          getGoodInventory({
            id: this.goodInfo.id,
            spec: this.specStr
          }).then(res => {
            if (res.status === 200) {
              this.isChoosen = true;
              this.spec_id = res.data.data.id;
              this.spe_price = res.data.data.spe_price;
              this.discount_price = res.data.data.discount_price;
              this.original_price = res.data.data.original_price;
              this.points = res.data.data.points;
              this.is_vip = res.data.data.is_vip;
              this.inventory = res.data.data.spec_inventory;
              this.imgUrl = res.data.data.spec_img;
            }
          });
        } else {
          this.isChoosen = false;
        }
      }
    }
  },
  methods: {
    buy() {
      if (!this.isChoosen) {
        this.$dialog.toast({
          mes: "请选择服务项目",
          timeout: 1500,
          icon: "error"
        });
      } else if (this.inventory === 0) {
        this.$dialog.toast({
          mes: "库存不足",
          timeout: 1500,
          icon: "error"
        });
      } else {
        if (this.$route.query.invite_code) {
          this.$router.push({
            path: "/payment",
            query: {
              id: this.goodInfo.id,
              spec: this.specStr,
              number: this.number,
              type: "pay",
              invite_code: this.$route.query.invite_code
            }
          });
        } else {
          this.$router.push({
            path: "/payment",
            query: {
              id: this.goodInfo.id,
              spec: this.specStr,
              number: this.number,
              type: "pay"
            }
          });
        }
      }
    },
    addToCart() {
      if (!this.isChoosen) {
        this.$dialog.toast({
          mes: "请选择服务项目",
          timeout: 1500,
          icon: "error"
        });
      } else if (this.inventory === 0) {
        this.$dialog.toast({
          mes: "库存不足",
          timeout: 1500,
          icon: "error"
        });
      } else {
        addToCart({
          id: this.goodInfo.id,
          spu_id: this.spec_id,
          number: this.number
        }).then(res => {
          if (res.status === 200) {
            this.$dialog.toast({
              mes: "添加成功",
              timeout: 1500,
              icon: "success"
            });
            this.$emit("goodChoose", {
              isChoosen: false
            });
            this.pageLeave = true;
            setTimeout(() => {
              this.$emit("panelClose", "");
              this.pageLeave = false;
            }, 400);
          }
        });
      }
    },
    maskClick() {
      this.pageLeave = true;
      if (this.isChoosen && this.inventory !== 0) {
        this.$emit("goodChoose", {
          isChoosen: true,
          chooseStr: this.chooseStr,
          discount_price: this.discount_price,
          original_price: this.original_price,
          price: this.spe_price,
          choose: this.choose,
          spec: this.specStr,
          number: this.number,
          spec_id: this.spec_id,
          points: this.points
        });
      } else {
        this.$emit("goodChoose", {
          isChoosen: false
        });
      }
      setTimeout(() => {
        this.$emit("panelClose", "");
        this.pageLeave = false;
      }, 400);
    },
    chooseSize1(name, item) {
      if (this.choose[name] && this.choose[name].id === item.id) {
        this.$delete(this.choose, name);
      } else {
        this.$set(this.choose, name, item);
      }
      this.$forceUpdate();
    }
  },
  mounted() {},
  created() {
    this.imgUrl = this.img;
    this.choose = this.outterChoose;
  }
};
</script>

<style lang="less" scoped>
.item-size-choose {
  z-index: 9999;
  position: relative;

  .mask {
    animation-duration: 0.4s;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .choose-panel {
    animation-duration: 0.4s;
    z-index: 10000;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #fff;

    .icon-item {
      width: 3.2rem;
      height: 3.2rem;
      border-radius: 0.2rem;
      position: absolute;
      top: -1.5rem;
      left: 0.75rem;
      z-index: 10000;
      background-color: #dfdfdf;
      overflow: hidden;

      img {
        width: 100%;
      }
    }

    .item-info {
      margin-left: 4.4rem;

      .price {
        display: flex;
        line-height: 2rem;

        .vip-price {
          font-weight: bold;
          color: rgba(244, 67, 73, 1);
          font-size: 0.64rem;

          .vip-tag {
            color: rgba(255, 255, 255, 1);
            font-size: 0.4rem;
            background: rgba(244, 67, 73, 1);
            border-radius: 0.12rem;
            padding: 0 0.1rem;
          }
        }

        .normal-price {
          font-weight: bold;
          color: rgba(68, 68, 68, 1);
          font-size: 0.56rem;
          margin-right: 0.48rem;
        }
      }

      .info-text {
        padding-top: 0.48rem;
        font-size: 0.58rem;
        color: #666666;
      }
    }

    .choose-box {
      height: 12rem;
      overflow: auto;
      background: #fff;
    }

    .item-choose {
      padding: 0 3.2%;
      display: flex;
      align-items: center;

      .title {
        font-size: 0.58rem;
        // line-height: 1rem;
      }

      .choose-container {
        display: flex;
        flex-wrap: wrap;
        overflow: auto;
        width: 54%;

        .size {
          width: 100%;
          margin: 0.5rem 0.15rem;
          font-size: 0.58rem;
          border: 1px solid rgba(233, 233, 233, 1);
          height: 1.2rem;
          line-height: 1.2rem;
          text-align: center;
          color: rgba(68, 68, 68, 1);
          border-radius: 0.1rem;
          overflow: hidden;
        }

        .active {
          color: #fff;
          border-color: #fe82a6;
          background: rgba(248, 88, 89, 1);
        }
      }
    }

    .item-number {
      // width: calc(100% - 6.4%);
      display: flex;
      justify-content: space-between;
      padding: 0 3.2%;
      background-color: #fff;
      margin: 0.5rem 0;

      .title {
        font-size: 0.64rem;
      }

      .btn-hub {
        .number {
          padding: 0 0.875rem;
          line-height: 1.65rem;
          font-size: 1.125rem;
        }
      }
    }

    .confirm {
      width: 100%;
      border-top: 1px solid #dfdfdf;
      display: flex;

      .btn {
        // width: 50%;
        flex-grow: 1;
        font-size: 0.64rem;
        color: #fff;
        border: none;
        background: rgba(0, 120, 255, 1);
        height: 2rem;
      }

      .cart {
        background: rgba(248, 88, 89, 1);
      }
    }
  }
}
</style>
